react18

import { useDeferredValue } from 'react'
import ReactDOM from 'react-dom/client'
const root = ReactDom.createRoot(根标签的dom)
root.render(<App />)

react18新增的hook

useTransition 让某个渲染任务变成非紧急的任务

useDeferredValue 根据已有的状态数据,返回一个延迟的数据,也可以让某个部分的渲染延迟

useId  返回一个id值

Portal 默认组件写在哪里,组件的结构就渲染在哪里.portal可以让组件的结构渲染到指定位置 


单页面应用: spa 所有的页面结构都写在一个html中

为了实现单页面应用: 
1. 定义前端路由规则: 浏览器地址栏的路径和视图(组件)的一一对应规则
2. 监听浏览器地址栏的变化 
3. 要修改地址栏路径但是不发送请求


npm i react-router-dom@5.3.3

BrowserRouter : 监听浏览器地址栏的变化 在入口文件包裹app 值需要写一次
Route : 定义前端路由规则 <Route path="/路径" component={组件名}></Route>
Link : 修改路径,但是不发送请求 <Link to="/目标路径"></Link>

匹配模式:

    pathname: 浏览器地址栏的路径 
    path: Route的path

    模糊匹配:  pathname要以path开头. 以/为分割,分段比较

    精确匹配:  pathname和path是一致  给Route添加exact

Switch  用来包裹Route, 如果前面的路由匹配成功,后面的就不会再匹配了
Redirect  重定向 修改地址栏路径
NavLink  和Link的作用是一样的,但是会自动添加类型active,帮我们快速实现高亮 
可以通过activeClassName自定义类名

编程式导航 
history
    push('/目标路径', 要传递的数据)  修改浏览器地址栏的路径 添加历史记录
    replace('/目标路径', 要传递的数据) 修改浏览器地址栏的路径 替换历史记录
location 
    state 获取push/replace的第二个参数
match
    params 获取路由参数
    定义路由参数  <Route path="/路径/:参数名?" component={...}></Route>


嵌套路由

写嵌套路由的时候,把父路由的路径加载嵌套路由的路径前面
 